<template>
  <div class="app-container">
    <div style="margin-left:40%">
      <h1 v-text="form.eventTitle"></h1>
    </div>
    <div class="formDiv">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="事件描述" prop="eventContext">
          <el-input disabled v-model="form.eventContext" style="width: 90%" type="textarea" />
        </el-form-item>
        <!-- <el-form-item label="当前处理人" prop="nextNickName">
          <el-input disabled v-model="form.nextNickName" style="width: 90%" />
        </el-form-item>-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <div style="font-size:20px;color:#3366ff;font-weight:700">事件履历</div>
          </el-col>
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增履历</el-button>
          </el-col>
        </el-row>
        <el-table
          ref="eventRef"
          id="eventId"
          :data="eventDetailList"
          :header-cell-style="tableHeadStyle"
          :row-class-name="tableRowClassName"
          height="300"
          border
        >
          <el-table-column
            label="时间"
            align="center"
            prop="createTime"
            width="150"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime)}}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作人"
            align="center"
            prop="userName"
            width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="处理人"
            align="center"
            prop="remark"
            width="100"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="操作"
            align="center"
            prop="operationType"
            width="80"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="处理意见"
            align="center"
            prop="disposeContext"
            width="250"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="附件"
            align="center"
            prop="fileName"
            width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <el-link
                type="primary"
                @click="handleExport(scope.row.fileId,scope.row.fileName)"
                style="text-decoration: underline;"
              >{{scope.row.fileName?"附件下载":""}}</el-link>
            </template>
          </el-table-column>
        </el-table>

        <el-form-item label="操作类型" prop="operationType">
          <el-input disabled v-model="form.operationType" placeholder="请输入操作类型" style="width: 90%" />
        </el-form-item>
        <el-form-item label="处理意见" prop="disposeContext">
          <el-input
            v-model="form.disposeContext"
            placeholder="请输入处理意见"
            style="width: 90%"
            type="textarea"
            :disabled="disableStatus"
          />
        </el-form-item>
        <el-form-item label="附件">
          <el-upload
            class="upload-demo"
            :headers="headers"
            :action="uploadUrl"
            :on-success="handleSuccess"
            :on-remove="handleRemove"
            :file-list="fileList"
          >
            <el-button size="small" type="primary" :disabled="disableStatus">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footerNew">
        <el-button type="primary" @click="submitForm" v-if="!disableStatus">提交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
    <!--新增履历 -->
    <!-- 添加或修改事件记录看版对话框 -->
    <el-dialog
      title="新增履历"
      :visible.sync="recordOpen"
      width="500px"
      append-to-body
      :close-on-click-modal="false"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="处理意见" prop="disposeContext">
          <el-input
            v-model="disposeContext"
            placeholder="请输入内容"
            style="width: 280px"
            type="textarea"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="recordSubmitForm">确 定</el-button>
        <el-button @click="recordOpen=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listDetail, getDetail, delDetail, addDetail, updateDetail } from "@/api/file/weekEventDetail";
import { getEvent } from "@/api/file/weekEvent";
import { getToken } from "@/utils/auth";
export default {
  name: "weekEventDetail",
  props: {
    windowOpen: {
      type: Boolean,
      default: false,
    },
    item: {
      type: Object,
      default: null,
    },
  },
  data () {
    return {
      publicPath: process.env.BASE_URL,
      headers: { Authorization: "Bearer " + getToken() },
      uploadUrl: process.env.VUE_APP_BASE_API + "/storeFile/file/upload?type=weekEvent",
      fileList: [],
      // 弹出层标题
      title: "标题内容",
      // 是否显示弹出层
      open: false,
      recordOpen: false,
      form: {
        disposeContext: null,
      },
      eventDetailList: [],
      rules: {
        disposeContext: [
          { required: true, message: "处理意见不能为空", trigger: "blur" },
        ],
      },
      disableStatus: false,
      disposeContext: "",
      fileId: null,
      fileName: null

    };
  },
  watch: {
    // windowOpen () {
    //   let self = this;
    //   self.open = self.windowOpen;
    //   if (self.open) {
    //     self.fileList = [];
    //     self.title = self.item.eventTitle;
    //     self.form.eventContext = self.item.eventContext;
    //     self.form.nextNickName = self.item.nextNickName;
    //     self.form.operationType = self.item.operationType;
    //     self.form.eventStatus = self.item.eventStatus;
    //     if (self.form.operationType == '办结') {
    //       self.form.disposeContext = self.item.disposeContext;
    //     }
    //     self.form.fileName = self.item.fileName;
    //     self.form.id = self.item.id;
    //     //操作类型为办结则不允许操作
    //     if (self.form.eventStatus == 2) {
    //       self.disableStatus = true;
    //     } else {
    //       self.disableStatus = false;
    //     }
    //     //获取事件履历
    //     self.getList();
    //   }
    // }
  },
  created () {
    let self = this;
    self.getEvent();
    self.getList();
  },
  methods: {
    /**
     * 获取事件信息
     */
    getEvent () {
      let self = this;
      let id = self.$route.query.id;
      getEvent(id).then(res => {
        self.form = res.data;
      });
    },

    /**
     * 获取履历事件
     */
    getList () {
      let self = this;
      let params = {
        eventId: self.$route.query.id
      };
      listDetail(params).then(response => {
        this.eventDetailList = response.data;
      });
    },

    // 取消按钮
    cancel () {
      let self = this;
      self.$emit('closeWindow');
    },
    /** 提交按钮 */
    submitForm () {
      let self = this;
      self.$refs["form"].validate(valid => {
        if (valid) {
          let save = {
            eventId: self.item.id,
            nextUserName: self.form.nextNickName,
            operationType: self.form.operationType,
            disposeContext: self.form.disposeContext,
            fileId: self.fileId,
            fileName: self.fileName,
          };

          updateDetail(save).then(res => {
            self.$modal.msgSuccess("修改成功");
            self.$emit('closeWindow');
          });

        }
      });
    },
    /**
     * 新增履历
     */
    handleAdd () {
      let self = this;
      self.recordOpen = true;

    },
    /**
     * 记录提交
     */
    recordSubmitForm () {
      let self = this;
      let nickName = self.$store.getters.userInfo.nickName;
      if (self.disposeContext) {
        let save = {
          eventId: self.item.id,
          userName: nickName,
          operationType: "评论",
          disposeContext: self.disposeContext,
          dataType: 2,//评论
        };
        addDetail(save).then(res => {
          self.recordOpen = false;
          self.$modal.msgSuccess("评论成功");
          self.getList();
        });

      }

    }
    ,
    /*上传成功后操作*/
    handleSuccess (res, file, fileList) {
      this.fileName = res.data.originalFilename;
      this.fileId = res.data.fileId;
    },
    //删除上传的文件
    handleRemove (file, fileList) {
      if (fileList.length <= 0) {
        this.fileId = "";
        this.fileName = "";
        return;
      }
    },
    /** 导出按钮操作 */
    handleExport (fileId, fileName) {
      let params = { "fileId": fileId };
      this.download('storeFile/file/downLoad', {
        ...params
      }, fileName)
    },
  }
};
</script>
<style scoped>
.formDiv {
  margin-top: 20px;
}

.dialog-footerNew {
  margin-top: 50px;
  margin-left: 45%;
}
</style>
